<template>
    <div>

        <div class="block" style="width: 250px;height: 50px">
            <span class="demonstration">请输入年份</span>
            <el-date-picker
                    @change="myEcharts2"
                    v-model="value3"
                    type="year"
                    placeholder="选择月">
            </el-date-picker>
        </div>
        <div id="main" style="width: 800px;height:500px;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Echarts2",
        data() {
            return {
                value3:"",
            }
        },
        created() {
            //根据token获取用户的信息
            setTimeout( ()=>{ //延时加载echarts初始化函数
                this.myEcharts2()
                // this.myEcharts3()
            },100)
        },
        methods:{
            myEcharts2(){
                let str = this.value3.toString().substring(11,15)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                this.$http.post("compay/log/logdata",{years:str}).then(function (result) {
                    var uldate;
                    uldate=result.data.result.logdata
                    console.log(uldate)
                    // 指定图表的配置项和数据
                    var  option = {
                        title: {
                            text: '系统操作日志统计',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['添加操作', '更新操作','删除操作']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    xAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: uldate.newdatax,
                        },
                        yAxis: {
                            type: 'value',
                            position: 'left',
                            axisLine: {
                                show: true,
                            },

                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },
                        series: [
                            {
                                name: '添加操作',
                                type: 'line',
                                data: uldate.count1,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            },
                            {
                                name: '更新操作',
                                type: 'line',
                                data: uldate.count2,
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            },
                            {
                                name: '删除操作',
                                type: 'line',
                                data: uldate.count3,
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }

                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            },
        }
    }

</script>

<style scoped>

</style>
